<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的文章</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    .my{
        width:80%;
        height: 170px;
        margin-left:10%;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        /*align-content: flex-start;*/
    }
    .mycard{
        width: 70rem;
        height: 10rem;
        margin-left: 10px;
    }
</style>
<body>

<ol class="breadcrumb">
    <li class="breadcrumb-item"><a  th:href="@{/index}">主页</a></li>
    <li class="breadcrumb-item active">我的文章</li>
</ol>
<h5>我的文章</h5>
<div class="my"  th:each="ArticleVo:${page.getRecords()}">
    <div class="container">
        <div class="card mycard" >
            <div class="card-body">
                <h4 class="card-title" th:text="${ArticleVo.articleTitle}"></h4>
                <p class="card-text" th:text="${#strings.abbreviate(ArticleVo.articleContent,75)}"></p>
                <p class="card-text">点击量：<span th:text="${ArticleVo.articleClicks}"></span></p>
             <a type="button" class="card-link" th:href="@{/user/toArticleCount(id=${ArticleVo.getArticleId()})}">详情</a>
             <a type="button" class="card-link" th:href="@{/article/getArticleById(articleId=${ArticleVo.getArticleId()})}">编辑</a>
             <a type="button" class="card-link"  th:href="@{/user/delArticle(id=${ArticleVo.getArticleId()})}">删除</a>
            </div>
        </div>
    </div>

</div>
<nav class="pagination-container">
    <ul class="pagination">
        <li th:class="${page.hasPrevious()?'':'disabled'}">
            <a th:unless="${page.current}==1" th:href="@{/user/getArticle(pageIndex=${page.current}-1)}" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
            <a th:if="${page.current}==1" href="javascript:void(0);" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>
        <li th:class="${page.current} eq 1 ? 'active':''">
            <a th:href="@{/user/getArticle(pageIndex=1,search=${search})}">首页</a>
        </li>
        <li>
            <a href="#">第[[${page.current}]]页/共[[${page.pages}]]页</a>
        </li>
        <li  th:class="${page.current}==${page.pages} ? 'active':''">
            <a th:href="@{/user/getArticle(pageIndex=${page.pages},search=${search})}">尾页</a>
        </li>

        <li th:class="${page.hasNext()?'':'disabled'}">
            <a th:unless="${page.current}==${page.pages}" aria-label="Next"
               th:href="@{/user/getArticle(pageIndex=${page.current}+1,search=${search})}">
                <span aria-hidden="true">下一页</span>
            </a>
            <a th:if="${page.current}==${page.pages}" aria-label="Next"
               href="javascript:void(0);">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>